<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];
const images = [

    "http://api.ddhk.net/storage/images/13/agency_cooling_pad/20250912091833312954.jpg"

];

</script>
<template>
    <div class="container banner__wrapper">


    </div>

    <div class="container">

        <div class="head-txt-img">

            <div class="head-txt">
                <div class="banner__upper">
                    <span class="banner__label">Agency Products</span>
                    <h1 class="banner__title">Cooling Pad</h1>
                </div>
                <p>
                    Based on the processing technology of Swedish Munters Company, the products produced in China offer high
                    cost performance.
                </p>
            </div>
            <div class="img">
                <img src="http://api.ddhk.net/storage/images/13/agency_cooling_pad/20250912092051597916.jpg" alt="">
            </div>
        </div>

    </div>

    <div class="container">

        <div class="zhibiao">
            <table>
                <tr class="head">
                    <td>
                        <div class="duijiaoxian">
                            <span class="l">item</span>
                            <span class="r">type</span>
                        </div>
                    </td>
                    <td>790</td>
                    <td>760</td>
                    <td>590</td>
                </tr>
                <tr class="con">
                    <td>Height(mm)</td>
                    <td>1500,1800,2000</td>
                    <td>1500,1800,2000</td>
                    <td>According to requirements</td>
                </tr>
                <tr class="con">
                    <td>Width(mm)</td>
                    <td>300,600</td>
                    <td>300,600</td>
                    <td>According to requirements</td>
                </tr>
                <tr class="con">
                    <td>Thickness(mm)</td>
                    <td>50,100,150,200</td>
                    <td>50,100,150,200</td>
                    <td>According to requirements</td>
                </tr>
                <tr class="con">
                    <td>Height Of Sheet(mm)</td>
                    <td>7</td>
                    <td>7</td>
                    <td>5</td>
                </tr>
                <tr class="con">
                    <td>a(Angle Of Sheet)</td>
                    <td>45°</td>
                    <td>15°</td>
                    <td>45°</td>
                </tr>
                <tr class="con">
                    <td>B(Angle Of Sheet)</td>
                    <td>45°</td>
                    <td>45°</td>
                    <td>45°</td>
                </tr>

            </table>
        </div>
    </div>

    <div class="container lunbo">
        <!-- 这里轮播图 -->
        <Swiper :loop="true">

            <SwiperSlide v-for="(item, index) in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide>


            <!-- <SwiperSlide>

    <img src="/src/assets/img/home/lunbo/lunbo1_1500x600.jpg" class="slide-image" alt="轮播图" />

</SwiperSlide> -->

        </Swiper>

    </div>

    <div class="container features">

        <h3>Performance</h3>
        <p>
            · paper sheets were treated by special technology,High strength,Corrosion resistance. Durable
            products; <br>
            · Good absorption and evaporation, to ensure better coolingperformance; <br />
            · Designed sheet wave shape to ensure getting better result of cooling.
        </p>
    </div>
</template>    

<style lang="less">
.head-txt-img {

    display: flex;
    flex-direction: row;
    align-items: center;

    border-bottom: solid 20px #004d7b;

    .head-txt {}

    .img {

        // width:400%;
        img {
            max-width: 550px;
        }

    }
}

.zhibiao {

    margin-top: 5rem;

    table {
        width: 100%;
        text-align: center;
    }

    .con {
        font-size: 14px;
        line-height: 1.5;
    }


    .head {

        background-color: #004d7b;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.5;
    }

}

.features {

    h3 {
        border-bottom: solid 1px;
        line-height: 3;
        font-size: 2.2rem;
        margin-bottom: 0;
    }

    p {
        line-height: 1.5;
    }
}

.duijiaoxian {
    position: relative;

    display:flex;
    justify-content:space-between;
    &::before {
        position: absolute;
        top:50%;
        left:0;
        content: " ";
        display: block;
        width: 100%;
        padding:0 10px ;
        margin-left:-10px;
        height: 0;
        border-bottom: 1px solid #fff;
        transform: rotate(7deg);

    }

    .l{
        position:relative;
        top:5px;
    }
    .r{
        position:relative;
        top:-5px;
    }
}

@media screen and (max-width:1200px){
    .duijiaoxian {
        &::before {
            transform: rotate(9deg);
        }
    }
}

@media screen and (max-width:768px){
    .duijiaoxian {
        &::before {
            transform: rotate(13deg);
        }
    }
}

@media screen and (max-width:500px){
    .duijiaoxian {
        &::before {
            transform: rotate(19deg);
        }
    }
}
</style>

<style>
.swiper {

    width: 800px;
    max-width: 100%;
    height: 400px;
    margin: 50px auto;

}

.slide-image {

    width: 100%;
    height: 100%;
    object-fit: cover;
    /*图片自适应容器，保持比例*/

}</style>